<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.all.js"></script>
    <style>
        .container {
            padding: 20px;
        }

        .search-container {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .search-container input {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            margin-right: 10px;
        }

        .search-container button {
            margin-left: 15px;
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }


        .search-container button:hover {
            background-color: #0056b3;
        }

        .operation-btns .layui-btn {
            margin-right: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table th, table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }

        table th {
            background-color: #007bff;
            color: #fff;
        }

        table tr:hover {
            background-color: #f1f1f1;
        }

        .book-details {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            font-size: 16px;
        }

        .book-details .detail-item {
            display: flex;
            justify-content: center;
            width: 100%;
            margin: 10px 0;
        }

        .book-details .detail-item p {
            width: 60%;
            margin: 0 10px;
        }

        .book-details .detail-item strong {
            width: 40%;
            justify-content: center;
            align-content: center;
            display: flex;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        #pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .layui-laypage a, .layui-laypage span {
            color: #007bff;
        }
        body {
            background-color: #FFF5E1; /* Light peach background */
            color: #6B4226; /* Dark brown text */
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th {
            background-color: #FFD700; /* Warm yellow header background */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
        }
        td {
            background-color: #FFF8DC; /* Light warm background for table cells */
            color: #6B4226; /* Dark brown text */
            padding: 10px;
            border: 1px solid #D2B48C; /* Tan borders */
        }
        a {
            color: #D2691E; /* Warm brown link color */
        }
        button {
            background-color: #FFB347; /* Warm orange button background */
            color: #FFFFFF; /* White text on buttons */
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
        }
        button:hover {
            background-color: #FF7F50; /* Slightly darker orange on hover */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="search-container">
        <label>
            <input type="text" id="searchTitle" class="layui-input" placeholder="请输入书名搜索">
        </label>
        <button id="searchBtn" type="button">搜索</button>
        <button id="addBookBtn" style="background-color: tomato" type="button">新增</button>
    </div>
    <table class="layui-table" id="bookTable">
        <thead>
        <tr>
            <th>图书ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>ISBN</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>库存数量</th>
            <th>类型</th>
            <th>简介</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pagination" class="layui-box layui-laypage layui-laypage-default"></div>

</div>

<script>

    layui.use(['table', 'laypage','layer'], function () {
        const table = layui.table;
        const laypage = layui.laypage;
        const layer = layui.layer;
        const limit = 5
        let page = 1

        /**
         * 加载表格数据
         * @param page
         * @param limit
         * @param title
         */
        function loadBookTable(page) {
            let title = $('#searchTitle').val();
            $.ajax({
                url: '/allBook',
                method: 'GET',
                data: {
                    title: title,
                    page: page,
                    limit: limit
                },
                success: function (res) {
                    const dataObj = JSON.parse(JSON.stringify(res));
                    renderTable(dataObj.data);
                    renderPagination(dataObj.count, page);
                },
                error: function () {
                    layui.layer.msg('查询失败，请重试', {icon: 2});
                }
            });
        }

        /**
         * 渲染表格
         * @param data 书籍数据
         */
        function renderTable(data) {
            let tbody = $('#bookTable tbody');
            tbody.empty();
            data.forEach(function (book) {
                let tr = $('<tr   data-book ="' + book + ' ">');
                tr.append('<td>' + book.book_id + '</td>');
                tr.append('<td><a href="javascript:;" class="book-title" target="view_frame" data-id="' + book.book_id + '">' + book.title + '</a></td>');
                tr.append('<td>' + book.author + '</td>');
                tr.append('<td>' + book.isbn + '</td>');
                tr.append('<td>' + book.publisher + '</td>');
                tr.append('<td>' + book.publish_date + '</td>');
                tr.append('<td>' + book.stock_quantity + '</td>');
                tr.append('<td>' + book.type + '</td>');
                tr.append('<td><a href="javascript:;" class="view-introduce" data-introduce="' + book.introduce + '">' + book.introduce + '</a></td>');
                tr.append('<td class="operation-btns">' +
                    '<button class="layui-btn layui-btn-warm edit-btn" ' +
                    'data-id="' + book.book_id + '"' +
                    '>修改</button>' +
                    '<button class="layui-btn layui-btn-danger delete-btn" data-id="' + book.book_id + '">删除</button>' +
                    '</td>');
                tr.data('book', JSON.stringify(book));  // Attach book data to row
                tbody.append(tr);
            });
        }

        /**
         * 渲染分页条
         * @param total 总记录数
         * @param curr 当前页码
         */
        function renderPagination(total, curr) {
            laypage.render({
                elem: 'pagination',
                count: total,
                curr: curr,
                limit: limit,
                jump: function (obj, first) {
                    if (!first) {
                        loadBookTable(obj.curr);
                    }
                }
            });
        }

        $(document).ready(function () {
            loadBookTable(page);

            /**
             *搜索点击事件
             */
            $('#searchBtn').click(function () {
                loadBookTable(1);
            });

            /**
             * 点击查看简介
             */
            $(document).on('click', '.view-introduce', function () {
                let introduce = $(this).data('introduce');
                layui.layer.open({
                    title: '书籍介绍',
                    content: introduce
                });
            });

            /**
             * 新增图书
             */
            $('#addBookBtn').click(function () {
                let content = `
        <div class="book-details">
            <div class="detail-item">
                <strong>书名:</strong>
                <input type="text" class="layui-input" id="addTitle">
            </div>
            <div class="detail-item">
                <strong>作者:</strong>
                <input type="text" class="layui-input" id="addAuthor">
            </div>
            <div class="detail-item">
                <strong>ISBN:</strong>
                <input type="text" class="layui-input" id="addIsbn">
            </div>
            <div class="detail-item">
                <strong>出版社:</strong>
                <input type="text" class="layui-input" id="addPublisher">
            </div>
            <div class="detail-item">
                <strong>出版日期:</strong>
                <input type="date" class="layui-input" id="addPublishDate">
            </div>
            <div class="detail-item">
                <strong>库存数量:</strong>
                <input type="number" class="layui-input" id="addStockQuantity">
            </div>
            <div class="detail-item">
                <strong>类型:</strong>
                <input type="text" class="layui-input" id="addType">
            </div>
            <div class="detail-item">
                <strong>简介:</strong>
                <textarea class="layui-input" id="addIntroduce"></textarea>
            </div>
        </div>
        <div class="button-container">
            <button class="layui-btn layui-btn-primary" id="saveAddBtn">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="layui.layer.closeAll();">关闭</button>
        </div>
    `;
                layui.layer.open({
                    type: 1,
                    title: '新增图书',
                    content: content,
                    area: ['500px', '600px']
                });

                $('#saveAddBtn').click(function () {
                    $.ajax({
                        url: '/admin/addBook',
                        type: 'POST',
                        data: {
                            title: $('#addTitle').val(),
                            author: $('#addAuthor').val(),
                            isbn: $('#addIsbn').val(),
                            publisher: $('#addPublisher').val(),
                            publish_date: $('#addPublishDate').val(),
                            stock_quantity: $('#addStockQuantity').val(),
                            type: $('#addType').val(),
                            introduce: $('#addIntroduce').val()
                        },
                        success: function (response) {
                            layui.layer.msg(response.msg, {icon: 1});
                            loadBookTable(1, 10);
                            layui.layer.closeAll();
                        },
                        error: function (xhr) {
                            layui.layer.msg('新增失败', {icon: 2});
                        }
                    });
                });
            });

            /**
             * 编辑图书
             */
            $(document).on('click', '.edit-btn', function () {

                let editBook = $(this).closest('tr').data('book');

                let bookId = $(this).data('id');
                let title = $(this).data('title');
                if (editBook) {

                    parent.document.getElementById('view_frame').src = './page/admin/editBook.jsp?bookId=' + bookId;




                } else {
                    layui.layer.msg('无法获取图书信息', {icon: 2});
                }
            });

            /**
             * 删除图书
             */
            $(document).on('click', '.delete-btn', function () {
                let bookId = $(this).data('id');

                layui.layer.confirm('确定删除这本书吗？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        url: '/admin/deleteBook',
                        type: 'POST',
                        data: {
                            bookId: bookId
                        },
                        success: function (response) {
                            layui.layer.msg(response.msg, {icon: 1});
                            loadBookTable(1);
                            layui.layer.close(index);
                        },
                        error: function (xhr) {
                            layui.layer.msg('删除失败', {icon: 2});
                        }
                    });
                });
            });

            /**
             * 书籍title列点击事件
             */
            $('#bookTable').on('click', '.book-title', function () {
                let bookId = $(this).data('id');
                parent.document.getElementById('view_frame').src = './page/public/bookDetail.jsp?bookId=' + bookId;
            })

        });
    });
</script>


</body>
</html>
